<template>
	<view>
		<u-popup :show="visible" @close="closeHandle" @open="openHandle">
			<view class="operate">
				<view class="operate-btn" @tap.stop="closeHandle">取消</view>
				<view v-if="isShowSearch">
					<u--input v-if="showSearch===true" placeholder="请输入" border="surround" prefixIcon="search"
						v-model="inputValue" @change="inputHandle"></u--input>
				</view>
				<view class="operate-btn blue" @tap="submitHandle">确定</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="pickerValue" @pickstart="startHandle"
				@pickend="endHandle" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in filterColumns" :key="index" 
					:class="index === pickerValue[0] ? 'highblue' : ''">{{item.label}}</view>
				</picker-view-column>
			</picker-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		// label value
		props: {
			show: {
				type: Boolean,
				default: false
			},
			showSearch: {
				type: Boolean,
				default: true
			},
			multiple: {
				type: Boolean,
				default: false
			},
			value: {
				default: ''
			},
			fuzzy: {
				type: String,
				default: ''
			},
			columns: {
				type: Array,
				default: function() {
					return []
				}
			},
			propertyId: {
				type: String,
				default: 'value'
			},
			isShowSearch: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			visible() {
				return this.show
			},
			indexs: {
				get() {
					return this.value
				},
				set(val) {
					console.log('set?', val)
				}
			},
			filterColumns() {
				return this.pickerColumns.filter(v => {
					return v.label.includes(this.inputValue)
				})
			}
		},
		data() {
			return {
				inputValue: '',
				pickerValue: [],
				pickerColumns: [],
				isScroll: false,
				indicatorStyle: `height: 50px;`
			}
		},
		methods: {
			openHandle() {
				// 初始化
				console.log('初始化');
				this.pickerColumns = this.columns
				console.log(this.showSearch,this.value,'showSearch');
				this.calibration()
				this.$emit('open')
			},
			calibration() {
				let that = this
				let index = this.filterColumns.findIndex(v => v[that.propertyId] == this.value)
				if (index < 0) index = 0
				setTimeout(() => {
					this.pickerValue = [index]
				}, 200)
			},
			closeHandle() {
				this.inputValue = ''
				this.$emit('close')
			},
			submitHandle() {
				if (this.isScroll) {
					setTimeout(() => {
						this.submitHandle()
					}, 100)
				} else {
					const val = this.filterColumns[this.pickerValue[0]]
					this.inputValue = ''
					this.$emit('submit', val)
				}
			},
			startHandle() {
				this.isScroll = true
			},
			endHandle() {
				this.isScroll = false
			},
			bindChange(e) {
				console.log(e, '99999')
				this.pickerValue = e.detail.value
			},
			inputHandle() {
				console.log(this.inputValue)
				this.$nextTick(() => {
					this.calibration()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.operate {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.operate-btn {
			padding: 30rpx;
		}

		.blue {
			color: #3C9CFF;
		}
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
		font-size: 26rpx;
	}
	.highblue {
		color: #3C9CFF;
		font-weight: 700;
	}
</style>
